<template>
  <div>
    <puplic-modal
      width="980px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="cancel"
      @handleOk="handleOk"
      confirmContext="发布"
      :title="title"
    >
      <div slot="content" class="content">
        <div class="search-group" style="width: 40%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">栏目:</div>
            <div class="input-item" style="width: 100%">
              <a-select ref="select" placeholder="请选择栏目" @change="selectChange" v-model="queryParam.columnType">
                <a-select-option v-for="(item, index) in publicize_column_type" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 40%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">分类:</div>
            <div class="input-item" style="width: 100%">
              <a-select ref="select" placeholder="请选择分类" v-model="queryParam.publicizeType">
                <a-select-option v-for="(item, index) in publicizeType" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 40%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">标题:</div>
            <div class="input-item" style="width: 100%">
              <a-input :maxLength="30" clearable v-model="queryParam.title" placeholder="请输入标题" />
            </div>
          </div>
        </div>

        <u-editor
          class="mt-10"
          styleStr="width: 100%; height: 100%"
          :message="message"
          @change="contentChange"
          @inputStringLength="getStringLength"
        ></u-editor>
        <span style="color: #4994e0">最长输入{{ quillStringLength }}/ 10000</span>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import UEditor from '@/components/UEditor'
import puplicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { ajaxGetDictItems, uploadUeditorImg } from '@/api/api'
import { publicize_message_add, publicize_message_edit } from '@/api/publicSecurityPropaganda'
export default {
  components: { puplicModal, UEditor },
  mixins: [comMethods],
  name: 'addEditSupportModal',
  data() {
    return {
      title: '新增',
      records: {},
      publicVisible: false,

      queryParam: {
        columnType: undefined,
        publicizeType: undefined,
        title: '',
        content: '',
      },

      message: '',

      fileList: [],
      fileUrl: [],
      quillStringLength: 0,
      showUploadList: {
        showPreviewIcon: false,
      },

      publicize_column_type: [],
      publicize_three_no: [],
      publicize_five_prohibitions: [],
      publicize_four_reverse: [],
      publicize_four_preventions: [],
      publicizeType: [],
    }
  },
  methods: {
    async getDist() {
      let { result: publicize_column_type } = await ajaxGetDictItems({ code: 'publicize_column_type' })
      this.publicize_column_type = publicize_column_type

      // 三无
      let { result: publicize_three_no } = await ajaxGetDictItems({ code: 'publicize_three_no' })
      this.publicize_three_no = publicize_three_no

      // 五禁
      let { result: publicize_five_prohibitions } = await ajaxGetDictItems({ code: 'publicize_five_prohibitions' })
      this.publicize_five_prohibitions = publicize_five_prohibitions

      // 四反
      let { result: publicize_four_reverse } = await ajaxGetDictItems({ code: 'publicize_four_reverse' })
      this.publicize_four_reverse = publicize_four_reverse

      // 四防
      let { result: publicize_four_preventions } = await ajaxGetDictItems({ code: 'publicize_four_preventions' })
      this.publicize_four_preventions = publicize_four_preventions
    },

    selectChange(item) {
      this.queryParam.publicizeType = undefined
      this.publicizeType = this[item]
    },

    show(records) {
      this.getDist()
      this.records = records
      if (records && records.id) {
        this.title = '编辑'
        this.queryParam.title = records.title

        this.queryParam.columnType = records.columnType
        this.publicizeType = this[records.columnType]
        this.queryParam.publicizeType = records.publicizeType.toString()
        this.message = records.content
      } else {
        this.title = '新增'
        this.message = ''
        this.queryParam.title = ''
      }
      this.publicVisible = true
    },

    picturesChange(info) {
      info.file.status = 'done'
      this.fileList = info.fileList
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传JPG,PNG格式图片!')
      }
      const isLt2M = info.file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!')
      }
      if (isJpgOrPng && isLt2M) {
        let formData = new FormData()
        formData.append('file', info.file)
        formData.append('type', 1)
        formData.get('file')
        let { result } = await uploadUeditorImg(formData)
        this.fileUrl.push(result.halfPath)
      }
    },

    contentChange(value) {
      this.queryParam.content = value
    },

    getStringLength(value) {
      this.quillStringLength = value
      if (value > 10000) this.$message.error('字段超长不能被提交')
    },

    async handleOk() {
      if (!this.queryParam.columnType) {
        this.$message.error('栏目不能为空！请选择栏目！')
        return
      }

      if (!this.queryParam.publicizeType) {
        this.$message.error('分类不能为空！请选择分类！')
        return
      }

      if (!this.queryParam.title) {
        this.$message.error('标题不能为空！请输入标题！')
        return
      }

      if (!this.queryParam.content) {
        this.$message.error('内容不能为空！请输入内容！')
        return
      }

      if (this.quillStringLength > 10000) {
        this.$message.error('字段超长不能被提交！')
        return
      }

      let data = { ...this.queryParam }

      if (this.title == '新增') {
        let res = await publicize_message_add(data)
        this.$message.success(res.message)
        this.publicVisible = false
        this.cancel()
        this.$emit('refresh')
      } else {
        data.id = this.records.id
        let res = await publicize_message_edit(data)
        this.$message.success(res.message)
        this.publicVisible = false
        this.cancel()
        this.$emit('refresh')
      }
    },

    cancel() {
      this.fileUrl = []
      this.fileList = []
      this.quillStringLength = ''
      this.publicVisible = false
      this.queryParam.columnType = undefined
      this.queryParam.publicizeType = undefined
    },
  },
}
</script>
<style lang="less">
@import '~@/assets/less/common.less';
.ant-upload.ant-upload-select-picture-card,
.ant-upload {
  background: #104c8a;
  border-color: #104c8a;
}
.addEditSupportModal {
  .content {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem !important;
  }
  .mt-10 {
    margin-top: 0.1rem;
  }
  .items {
    margin-bottom: 0.1rem;
    .label {
      display: inline-block;
      vertical-align: middle;
      width: 0.5rem;
    }
    .value {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 0.7rem);
    }
  }
  .uploadImg {
    .label {
      vertical-align: top;
    }
    .value {
      vertical-align: top;
    }
  }
  .search-group {
    padding: 0;
  }
}
</style>
